/**
 * 一、React是同步的还是异步的？
 * 1、React18，不管在什么地方都是异步的
 * 2、React16,17要根据情况决定
 * 1）如果在合成事件或者生命周期中,setState是异步的---->受控部分
 * 2）原生的事件处理回调函数中(addEventListener)、定时器(setTimeout,setInterval)是同步的--->不受控部分
 * 二、React的setState为什么要设计成异步的？
 * 设计成异步的主要原因是性能方面的考虑
 * 1、触发render的条件
 * 1）如果你调用setState()就会触发
 * 2）如果new Props时候也会触发render的变化
 * 3）调用forceUpdate():强制刷新页面
 * 2、减少render调用是我们react性能优化核心思想
 * 在合成事件中，调用多次setState()他不会立即更新页面,而是放入任务队列，后续进行延迟更新
 * 如果在合成事件中，调用了多次setState()会进行合并，大大提高了性能。
 * 注意、定时器和原生事件事件的初始化要放在React的生命周期componentDidMount钩子函数中
 */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  constructor(){
    super()
    this.state={
      count:0
    }
  }
  //类似与vue中的mounted钩子函数
  /*
  componentDidMount(){
    //原生事件
    document.querySelector("#btn").addEventListener('click',()=>{
      console.log('count变量更新前:',this.state.count);
      this.setState({
        count:this.state.count+1
      })
      console.log('count变量更新后:',this.state.count);
      console.log('--------------------------------------------');
      console.log('count变量更新前:',this.state.count);
      this.setState({
        count:this.state.count+3
      })
      console.log('count变量更新后:',this.state.count);
    })
    //延时定时器
    window.setTimeout(()=>{
      console.log('count变量更新前:',this.state.count);
      this.setState({
        count:this.state.count+3
      })
      console.log('count变量更新后:',this.state.count);
      console.log('--------------------------------------------');
      console.log('count变量更新前:',this.state.count);
      this.setState({
        count:this.state.count+1
      })
      console.log('count变量更新后:',this.state.count);
    },5000)
  }
  */
  //合成事件
  increment=()=>{
   
    console.log('count变量更新前:',this.state.count);
    ReactDOM.flushSync(()=>{
      this.setState({
        count:this.state.count+1
      })
    })
    console.log('count变量更新后:',this.state.count);
    console.log('--------------------------------------------');
    console.log('count变量更新前:',this.state.count);
    ReactDOM.flushSync(()=>{
      this.setState({
        count:this.state.count+5
      })
    })
    console.log('count变量更新后:',this.state.count);
    console.log('--------------------------------------------');
    console.log('count变量更新前:',this.state.count);
    ReactDOM.flushSync(()=>{
      this.setState({
        count:this.state.count+3
      })
    })
    console.log('count变量更新后:',this.state.count);
    console.log('--------------------------------------------');
  }
  render() {
    const {count}=this.state
    return (
      <div>
         <div>{count}</div>
         <button onClick={this.increment}>更新</button>
         <button id='btn'>同步更新</button>
      </div>
    )
  }
}
